<template>
  <div>
    <el-table :data="tableData" border row-key="id">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作" width="250" align="center">
        <template #="{ row }">
          <el-button
            type="warning"
            size="small"
            @click="addFunction(row)"
            v-if="row.children.length && row.children[0].type === 2"
          >
            添加功能
          </el-button>
          <el-button
            type="success"
            size="small"
            @click="addMenu(row)"
            v-else-if="row.level === 1 || row.children.length"
          >
            添加菜单
          </el-button>
          <el-button
            type="success"
            size="small"
            @click="addMenuOrFunction(row)"
            v-else-if="
              row.type === 1 && (!row.children || !row.children.length)
            "
          >
            添加菜单/功能
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(row)"
            v-if="row.level > 1"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row)"
            v-if="row.level > 1"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogTitle" v-model="dialogVisible">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="权限值" prop="code">
          <el-input v-model="form.code" />
        </el-form-item>
        <el-form-item label="类型" prop="type" v-if="!dialogType">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="菜单" :value="1" />
            <el-option label="按钮" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogConfirm">确定</el-button>
          <el-button @click="dialogCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="Permission">
import { ref, onMounted, reactive, computed } from 'vue'
import {
  reqGetPermission,
  reqSavePermission,
  reqUpdatePermission,
  reqRemovePermission
} from '@/api/acl/permission'
const tableData = ref([])
onMounted(() => {
  getAllPermission()
})
const getAllPermission = () => {
  reqGetPermission().then((res) => {
    tableData.value = res.data
  })
}

const form = reactive<any>({
  name: '',
  code: '',
  type: 1,
  id: undefined,
  level: '',
  pid: ''
})
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  code: [{ required: true, message: '请输入权限值', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }]
}
let dialogVisible = ref(false)
let dialogType = ref(1) // 0-添加菜单/功能, 1-添加菜单，2-添加功能, 3-编辑菜单, 4-编辑功能
const addMenuOrFunction = (row: any) => {
  openDialog(row)
  dialogType.value = 0
}
const addMenu = (row: any) => {
  openDialog(row)
  dialogType.value = 1
}
const addFunction = (row: any) => {
  openDialog(row)
  dialogType.value = 2
  form.type = 2
}
const openDialog = (row: any) => {
  dialogVisible.value = true
  Object.assign(form, {
    name: '',
    code: '',
    type: 1,
    id: undefined,
    level: row.level + 1,
    pid: row.id
  })
}
const dialogCancel = () => {
  dialogVisible.value = false
}
const formRef = ref()
const dialogConfirm = () => {
  formRef.value.validate((valid: any) => {
    if (!valid) return
    const api = form.id ? reqUpdatePermission : reqSavePermission
    api(form).then((res) => {
      if (res.code === 200) {
        dialogVisible.value = false
        getAllPermission()
      }
    })
  })
}
const dialogTitle = computed(() => {
  switch (dialogType.value) {
    case 0:
      return '添加菜单/功能'
    case 1:
      return '添加菜单'
    case 2:
      return '添加功能'
    case 3:
      return '编辑菜单'
    case 4:
      return '编辑功能'
  }
})

const handleEdit = (row: any) => {
  openDialog(row)
  dialogType.value = row.type === 1 ? 3 : 4
  Object.assign(form, row)
}
const handleDelete = (row: any) => {
  reqRemovePermission(row.id).then((res) => {
    if (res.code === 200) {
      getAllPermission()
    }
  })
}
</script>
